分領域後
除了每週二的課程
每週四也會有老師指定的演示
本週我是負責jQuery
以下是我的不專業整理
jQuery是一套跨瀏覽器的JavaScript函式庫(library)，簡化HTML與JavaScript之間的操作。
jQuery是開源軟體，使用MIT授權條款授權。
jQuery的語法設計使得許多操作變得容易。
模組化的方式使jQuery函式庫能夠建立功能強大的動態網頁以及網路應用程式。
生日：2006年1月
最新版本：3.5 （4正在開發中）
最新版本釋出日期：2020年4月10日
勁敵：Bootstrap
jQuery是使用最多的JS庫之一，它有很多優點，比如輕量、易用、完善的Ajax、良好的瀏覽器相容，以及它有健壯的選擇器等。這些優點使得jQuery成為幫助前端開發人員的有力工具。
有兩個版本的jQuery 可供下載：
網址：https://jquery.com/download/
有兩種方式：
連到網路,連到本地端
網址：https://developers.google.com/speed/libraries
<body>
<script src="jquery.js"></script>
</body>
$(document).ready(function(){
所有 jQuery 函數位於document ready 函數中
});
如果在文檔沒有完全加載之前就運行函數，操作可能失敗。下面是兩個具體的例子：
試圖隱藏一個不存在的元素
獲得未完全加載的圖像的大小
選取物件：$("CSS選取器") or $("標籤")，$等同於jQuery
取得內容、屬性
console.log($("p").html()); // 取得內容
console.log($("p").attr("class")); // 取得 class 屬性的值
更新 style 屬性
$("p").css("color", "red"); // 改變文字顏色
$("p").css("font-style", "italic"); // 變斜體
更新一般屬性
$("p").attr("id", "myid");
$("p").attr("style", "font-weight: bold;font-size: 30px;");
取代裡面內容
$("p").html("<span>這是 span 標籤的內容。</span>");
$("p").text("<span>這是 span 標籤的內容。</span>");
移除元素
$("p").remove();
新增元素至某處
$("p").append("<span>這是 span 標籤的內容。</span>"); // 裡面的最後面
$("p").prepend("<span>這是 span 標籤的內容。</span>"); // 裡面的最前面
$("p").after("<span>這是 span 標籤的內容。</span>"); // 同層後面
$("p").before("<span>這是 span 標籤的內容。</span>"); // 同層前面
jQuery選取器
元素選擇器
Query 使用CSS 選擇器來選取HTML 元素。
$("p") 選取<p> 元素。
$("p.intro") 選取所有class="intro" 的<p> 元素。
$("p#demo") 選取所有id="demo" 的<p> 元素。
屬性選取器
jQuery 使用XPath表達式來選擇帶有給定屬性的元素。
$("[href]") 選取所有帶有href 屬性的元素。
$("[href='#']") 選取所有帶有href 值等於"#" 的元素
$("h1[id^='my_']")選取所有h1標籤，且 id 的屬性值開頭等於 my_ 的元素。
$("[href$='.jpg']") 選取所有href 值以".jpg" 結尾的元素
$("p[class*='ara']")選取所有p標籤，且 class 的屬性值有包含 ara 字串的元素。
CSS 選取器
$("p").css("background-color","red");
實例
篩選器
$("p").first().css("color", "red");
$("p").last().css("color", "red");
$("p").eq(0).css("color", "red"); // 第 1 個
$("p").eq(-1).css("color", "red"); // 倒數第 1 個
$("p").slice(1, 3).css("color", "red");// 從索引值 1 到 3，但不包含 3
事件：$(selector).action()
$("button").click(function() {$(this).hide() 為隱藏當前元素 } )
CSS操作
jQuery效果
顯示/隱藏
hide()
show()
toggle()
淡入/淡出
fadeIn()
fadeOut()
fadeToggle()
fadeTo(speed,opacity,callback))
滑入/滑出
slideDown()
slideUp()
slideToggle()
動畫
$(selector).animate({params}, speed, Easing, callback);
停止動畫
$(selector).stop(stopAll,goToEnd);
看了你的上課筆記，還蠻詳細的
之前上北科大java養成班應該要像你一樣上來做做筆記的Orz
現在才開始希望不會太晚
加油~~
這其實是我演示的題目～
筆記整理得越好
在寫code的時候比較方便！
我是寫前端的
光是html, css, javascript就有很多語法要記
我又很健忘
所以筆記對我來說省去網路查找的時間！
我使用的筆記是notion
iThome鐵人賽
看影片追技術